const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
    mode: 'development',

    entry: {
        app:"./src/index.js"
        // app: './src/makeStyle.min.js',
        //   print: './src/print.js',
    },
    devtool: 'inline-source-map',
    devServer: {
        contentBase: path.join(__dirname, './dist'),
        hot: true,
        port: 3000,
        clientLogLevel: 'silent'
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: 'webpack',
        }),
        new MiniCssExtractPlugin({
            filename: "[name].css",
            chunkFilename: "[id].css"
        }),
    ],
    module: {
        rules: [
        {
            test: /\.(js|mjs|jsx|ts|tsx)$/,
            loader: require.resolve('babel-loader')
        },
            {
                test: /\.css$/i,
                use: ['style-loader', 'css-loader'],
            }, {
                test: /\.s[ac]ss$/i,
                use: [
                    // 将 JS 字符串生成为 style 节点
                    'style-loader',
                    // 将 CSS 转化成 CommonJS 模块
                    {
                        loader: "css-loader",
                        options: {
                            modules: true,
                        }
                    },
                    // 将 Sass 编译成 CSS
                    'sass-loader',
                ],
            },
        ],
    },
    output: {
        filename: '[name].[chunkhash:8].js',
        path: path.resolve(__dirname, 'dist'),
        clean: true
    }
};